import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from "@angular/router";
import {  ProductService,Product,Comment } from "../shared/product.service";
import { WebSocketService } from "../shared/web-socket.service";
import 'rxjs/Rx'; //使用map方法专用。

@Component({
  selector: 'app-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {
  product: Product;

  comments: Comment[];

  newRating:number = 5;
  newComment:string = "";

  isCommentHidden = true;
  //以下是关注商品的变量声明。
  isWatched: boolean = false;
  currentBid:number;

  constructor(private routeInfo: ActivatedRoute, private productService: ProductService,
  private wsService: WebSocketService) { }

  ngOnInit() {
    let productId:number = this.routeInfo.snapshot.params["productId"];

    this.productService.getProduct(productId).subscribe(
      product => {
        this.product = product;
        this.currentBid = product.price;
      }
    );

    this.productService.getCommetsForProductId(productId).subscribe(
      comments => this.comments = comments
    );
  }

  addComment(){
    let comment = new Comment(0,this.product.id, new Date().toISOString(), "someone",this.newRating, this.newComment);
    this.comments.unshift(comment);

    let sum = this.comments.reduce((sum, comment) => sum + comment.rating, 0);
    this.product.rating = sum/this.comments.length;

    this.newComment = null;
    this.newRating = 5;
    this.isCommentHidden = true;


  }

  watchProduct() {
    this.isWatched = !this.isWatched;

    this.wsService.createObservableSocket("ws://localhost:8085", this.product.id)
    .subscribe(
      products => {
        console.log(products);
        console.log(typeof products);
        // let product = products.find( p => p.productId == this.product.id);
        // this.currentBid = product.bid;
      }
    );
  }

}
